<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>右键菜单 | eleTree2.0</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" type="image/png" href="/favicon.ico">
    <link rel="stylesheet" href="/eleTree/css/icon.css?v=2.2.12.1">
    <script src="/eleTree/eleTree.js?v=2.3.2.1"></script>
    <script>var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?7fcfe1e92263ed7399914905523c0c95";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script>
    <meta name="description" content="">
    <meta name="baidu-site-verification" content="IvAUSITvsn">
    <meta name="keywords" content="eleTree2.0在线文档">
    
    <link rel="preload" href="/assets/css/0.styles.aace74f1.css" as="style"><link rel="preload" href="/assets/js/app.480250c8.js" as="script"><link rel="preload" href="/assets/js/4.b0d5486a.js" as="script"><link rel="preload" href="/assets/js/34.91729efe.js" as="script"><link rel="preload" href="/assets/js/7.56874f53.js" as="script"><link rel="preload" href="/assets/js/13.b9d56332.js" as="script"><link rel="preload" href="/assets/js/14.73379bc3.js" as="script"><link rel="preload" href="/assets/js/15.7f1deca5.js" as="script"><link rel="prefetch" href="/assets/js/10.a0b1a881.js"><link rel="prefetch" href="/assets/js/11.38a905a5.js"><link rel="prefetch" href="/assets/js/12.283c4f32.js"><link rel="prefetch" href="/assets/js/16.68f9f651.js"><link rel="prefetch" href="/assets/js/17.1936bb47.js"><link rel="prefetch" href="/assets/js/18.b9d2e7ea.js"><link rel="prefetch" href="/assets/js/19.47022793.js"><link rel="prefetch" href="/assets/js/20.840dae7e.js"><link rel="prefetch" href="/assets/js/21.05ca35b5.js"><link rel="prefetch" href="/assets/js/22.430b273e.js"><link rel="prefetch" href="/assets/js/23.bc776c15.js"><link rel="prefetch" href="/assets/js/24.d4738935.js"><link rel="prefetch" href="/assets/js/25.75456f05.js"><link rel="prefetch" href="/assets/js/26.db4e6df0.js"><link rel="prefetch" href="/assets/js/27.c8722d8b.js"><link rel="prefetch" href="/assets/js/28.596bb539.js"><link rel="prefetch" href="/assets/js/29.b284c5db.js"><link rel="prefetch" href="/assets/js/3.b77c06cc.js"><link rel="prefetch" href="/assets/js/30.7cf1dbee.js"><link rel="prefetch" href="/assets/js/31.3c57113a.js"><link rel="prefetch" href="/assets/js/32.82dc2e02.js"><link rel="prefetch" href="/assets/js/33.30ba126c.js"><link rel="prefetch" href="/assets/js/35.2f8f329a.js"><link rel="prefetch" href="/assets/js/36.65394400.js"><link rel="prefetch" href="/assets/js/37.90ca698e.js"><link rel="prefetch" href="/assets/js/38.026f7dad.js"><link rel="prefetch" href="/assets/js/39.415e4ced.js"><link rel="prefetch" href="/assets/js/40.d57633b1.js"><link rel="prefetch" href="/assets/js/41.857dbc9a.js"><link rel="prefetch" href="/assets/js/42.c849b4ba.js"><link rel="prefetch" href="/assets/js/43.ccc6eb23.js"><link rel="prefetch" href="/assets/js/5.31af0348.js"><link rel="prefetch" href="/assets/js/6.cc7f3865.js"><link rel="prefetch" href="/assets/js/8.7615c930.js"><link rel="prefetch" href="/assets/js/9.6eb8268c.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.b0b0b3af.js">
    <link rel="stylesheet" href="/assets/css/0.styles.aace74f1.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">eleTree2.0</span></a> <div class="links"><form id="search-form" role="search" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"><div class="nav-item"><a href="/eleTree/installation.html" class="nav-link">
  eleTree2.0
</a></div><div class="nav-item"><a href="https://layuiextend.hsianglee.cn/eleTree/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  1.0版本
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/hsiangleev/eleTree" target="_blank" rel="noopener noreferrer" class="nav-link external">
  github
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://hsianglee.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
  个人博客
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/eleTree/installation.html" class="nav-link">
  eleTree2.0
</a></div><div class="nav-item"><a href="https://layuiextend.hsianglee.cn/eleTree/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  1.0版本
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/hsiangleev/eleTree" target="_blank" rel="noopener noreferrer" class="nav-link external">
  github
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://hsianglee.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
  个人博客
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <div class="advertise-top"><script async="async" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins data-ad-client="ca-pub-2229355551485035" data-ad-slot="6395441907" class="adsbygoogle" style="display:inline-block;width:210px;height:100px"></ins> <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script></div> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>开发指南</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/eleTree/installation.html" class="sidebar-link">安装</a></li><li><a href="/eleTree/quickstart.html" class="sidebar-link">快速开始</a></li><li><a href="/eleTree/update-log.html" class="sidebar-link">更新日志</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>使用文档</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/eleTree/usedocs-attr.html" class="sidebar-link">属性</a></li><li><a href="/eleTree/usedocs-methods.html" class="sidebar-link">方法</a></li><li><a href="/eleTree/usedocs-event.html" class="sidebar-link">事件</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>示例</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/eleTree/demo-methods.html" class="sidebar-link">方法示例</a></li><li><a href="/eleTree/demo-icon.html" class="sidebar-link">自定义图标或图片</a></li><li><a href="/eleTree/demo-customText.html" class="sidebar-link">文本节点自定义</a></li><li><a href="/eleTree/demo-datatype.html" class="sidebar-link">pid结构的数据格式</a></li><li><a href="/eleTree/demo-rightmenu.html" aria-current="page" class="active sidebar-link">右键菜单</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/eleTree/demo-drag.html" class="sidebar-link">节点拖拽</a></li><li><a href="/eleTree/demo-lazyload.html" class="sidebar-link">懒加载</a></li><li><a href="/eleTree/demo-search.html" class="sidebar-link">树节点搜索</a></li><li><a href="/eleTree/demo-manydata.html" class="sidebar-link">大数据量渲染</a></li><li><a href="/eleTree/demo-sort.html" class="sidebar-link">树节点排序</a></li><li><a href="/eleTree/explain.html" class="sidebar-link">规则说明</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h3 id="右键菜单"><a href="#右键菜单" class="header-anchor">#</a> 右键菜单</h3> <p><strong>右键菜单rightMenuList默认有10个可选项，即</strong></p> <ul><li>copy：            复制节点</li> <li>paste：           粘贴到子节点</li> <li>paste_before：    粘贴到节点之前</li> <li>paste_after：     粘贴到节点之后</li> <li>cut_paste：       剪贴节点</li> <li>edit：            编辑节点</li> <li>remove：          删除节点</li> <li>add_child：       添加子节点</li> <li>add_before：      添加到节点前</li> <li>add_after：       添加到节点后</li></ul> <h4 id="说明"><a href="#说明" class="header-anchor">#</a> 说明</h4> <ol><li>右键菜单默认不开启，即空数组</li> <li>支持菜单自定义</li> <li>每一项可以传入字符串或对象，对象的属性name为右键时显示的信息，value为事件名，如果传入字符串则name和value都为该字符串</li> <li>默认的可选项对应的事件名为该字符串，自定义的项事件名为“custom_”加上“value值”，例如“custom_test”</li> <li>事件的回调函数返回值包括
<ul><li>data：当前节点数据，</li> <li>type：当前触发事件的事件名，</li> <li>load：执行此项操作，</li> <li>stop：取消此项操作，</li> <li>rightClickData：如果是通过右键菜单触发的操作，则该值对应当前节点的数据（上一次右键时的节点数据）</li></ul></li> <li>如果不写事件回调，则默认自动执行此操作，否则需要在事件回调手动调用load函数才会执行此项操作</li> <li>edit/add_child/add_before/add_after的load函数可以传入节点的属性来自定义修改节点，如checked/disabled等</li></ol> <h4 id="默认可选项示例"><a href="#默认可选项示例" class="header-anchor">#</a> 默认可选项示例</h4> <div class="demo-block demo-zh-CN demo-demo-rightmenu"><div class="source"><div><div class="eletree7"></div></div></div> <div class="meta"><!----> <div class="code"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>eletree7<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">var</span> el1 <span class="token operator">=</span> <span class="token function">eleTree</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'.eletree7'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'/eleTree/json/1.json'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">highlightCurrent</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token literal-property property">showCheckbox</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token literal-property property">expandOnClickNode</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token literal-property property">checkOnClickNode</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token literal-property property">imgUrl</span><span class="token operator">:</span> <span class="token string">&quot;/eleTree/images/&quot;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">icon</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">fold</span><span class="token operator">:</span> <span class="token string">&quot;fold.png&quot;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">leaf</span><span class="token operator">:</span> <span class="token string">&quot;leaf.png&quot;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">checkFull</span><span class="token operator">:</span> <span class="token string">&quot;.eletree_icon-check_full&quot;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">checkHalf</span><span class="token operator">:</span> <span class="token string">&quot;.eletree_icon-check_half&quot;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">checkNone</span><span class="token operator">:</span> <span class="token string">&quot;.eletree_icon-check_none&quot;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">dropdownOff</span><span class="token operator">:</span> <span class="token string">&quot;.eletree_icon-dropdown_right&quot;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">dropdownOn</span><span class="token operator">:</span> <span class="token string">&quot;.eletree_icon-dropdown_bottom&quot;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">loading</span><span class="token operator">:</span> <span class="token string">&quot;.eleTree-animate-rotate.eletree_icon-loading1&quot;</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">rightMenuList</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;copy&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;paste&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;paste_before&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;paste_after&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;cut_paste&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;edit&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;remove&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;add_child&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;add_before&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;add_after&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 如果不写下面的事件，则默认自动执行此操作</span>
el1<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&quot;copy&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>load<span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&quot;paste&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>load<span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&quot;paste_before&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>load<span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&quot;paste_after&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>load<span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&quot;cut_paste&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>load<span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&quot;edit&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        data<span class="token punctuation">.</span><span class="token function">load</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            <span class="token literal-property property">checked</span><span class="token operator">:</span> <span class="token boolean">true</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&quot;remove&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>load<span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&quot;add_child&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>load<span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&quot;add_before&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>load<span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&quot;add_after&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>load<span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br></div></div></div></div> <div class="demo-block-control"><i class="caret-bottom"></i> <span style="display:none;">显示代码</span></div></div><h4 id="自定义菜单示例"><a href="#自定义菜单示例" class="header-anchor">#</a> 自定义菜单示例</h4> <div class="demo-block demo-zh-CN demo-demo-rightmenu"><div class="source"><div><div class="eletree8"></div></div></div> <div class="meta"><!----> <div class="code"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>eletree8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">var</span> el2 <span class="token operator">=</span> <span class="token function">eleTree</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'.eletree8'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'/eleTree/json/1.json?v=2.0.12'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">highlightCurrent</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token literal-property property">showCheckbox</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token literal-property property">showRadio</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token literal-property property">imgUrl</span><span class="token operator">:</span> <span class="token string">&quot;/eleTree/images/&quot;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">icon</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">fold</span><span class="token operator">:</span> <span class="token string">&quot;fold.png&quot;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">leaf</span><span class="token operator">:</span> <span class="token string">&quot;leaf.png&quot;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">checkFull</span><span class="token operator">:</span> <span class="token string">&quot;.eletree_icon-check_full&quot;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">checkHalf</span><span class="token operator">:</span> <span class="token string">&quot;.eletree_icon-check_half&quot;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">checkNone</span><span class="token operator">:</span> <span class="token string">&quot;.eletree_icon-check_none&quot;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">dropdownOff</span><span class="token operator">:</span> <span class="token string">&quot;.eletree_icon-dropdown_right&quot;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">dropdownOn</span><span class="token operator">:</span> <span class="token string">&quot;.eletree_icon-dropdown_bottom&quot;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">loading</span><span class="token operator">:</span> <span class="token string">&quot;.eleTree-animate-rotate.eletree_icon-loading1&quot;</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">rightMenuList</span><span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;选中此项&quot;</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&quot;checked&quot;</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;取消此项选中&quot;</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&quot;unchecked&quot;</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;全选&quot;</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&quot;allchecked&quot;</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;反选&quot;</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&quot;reversechecked&quot;</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span><span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;重载树&quot;</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">&quot;reload&quot;</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 如果不写下面的事件，则默认自动执行此操作</span>
el2<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&quot;custom_checked&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
        el2<span class="token punctuation">.</span><span class="token function">setChecked</span><span class="token punctuation">(</span><span class="token punctuation">[</span>data<span class="token punctuation">.</span>data<span class="token punctuation">.</span>id<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span>
        data<span class="token punctuation">.</span><span class="token function">load</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&quot;custom_unchecked&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
        el2<span class="token punctuation">.</span><span class="token function">unChecked</span><span class="token punctuation">(</span><span class="token punctuation">[</span>data<span class="token punctuation">.</span>data<span class="token punctuation">.</span>id<span class="token punctuation">]</span><span class="token punctuation">)</span>
        data<span class="token punctuation">.</span><span class="token function">load</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&quot;custom_allchecked&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
        el2<span class="token punctuation">.</span><span class="token function">setAllChecked</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        data<span class="token punctuation">.</span><span class="token function">load</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&quot;custom_reversechecked&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
        el2<span class="token punctuation">.</span><span class="token function">reverseChecked</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        data<span class="token punctuation">.</span><span class="token function">load</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&quot;custom_reload&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
        el2<span class="token punctuation">.</span><span class="token function">reload</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            <span class="token literal-property property">defaultExpandAll</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
            <span class="token literal-property property">defaultCheckedKeys</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'003001'</span><span class="token punctuation">]</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
        data<span class="token punctuation">.</span><span class="token function">load</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br></div></div></div></div> <div class="demo-block-control"><i class="caret-bottom"></i> <span style="display:none;">显示代码</span></div></div><h3 id="针对不同的节点个性化设置不同的菜单-2-3-1版本新增"><a href="#针对不同的节点个性化设置不同的菜单-2-3-1版本新增" class="header-anchor">#</a> 针对不同的节点个性化设置不同的菜单(2.3.1版本新增)</h3> <h4 id="说明-2"><a href="#说明-2" class="header-anchor">#</a> 说明</h4> <ol><li>rightMenuList可以传递函数，并返回一个数组，内部根据返回不同的数组设置不同的菜单</li></ol> <h4 id="示例"><a href="#示例" class="header-anchor">#</a> 示例</h4> <div class="demo-block demo-zh-CN demo-demo-rightmenu"><div class="source"><div><div class="eletree17"></div></div></div> <div class="meta"><!----> <div class="code"><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>eletree17<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token function">eleTree</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'.eletree17'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">imgUrl</span><span class="token operator">:</span> <span class="token string">&quot;/eleTree/images/&quot;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'/eleTree/json/1.json?v=2.0.12'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">highlightCurrent</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token literal-property property">showCheckbox</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token literal-property property">showRadio</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token function-variable function">rightMenuList</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> s <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>data<span class="token punctuation">.</span>label<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>id<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">&quot;2&quot;</span><span class="token punctuation">)</span><span class="token operator">!==</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token string">&quot;copy&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;paste&quot;</span><span class="token punctuation">]</span>
        <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token string">&quot;add_child&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;add_before&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;add_after&quot;</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div></div></div> <div class="demo-block-control"><i class="caret-bottom"></i> <span style="display:none;">显示代码</span></div></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">11/24/2021, 5:20:18 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/eleTree/demo-datatype.html" class="prev">
        pid结构的数据格式
      </a></span> <span class="next"><a href="/eleTree/demo-drag.html">
        节点拖拽
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.480250c8.js" defer></script><script src="/assets/js/4.b0d5486a.js" defer></script><script src="/assets/js/34.91729efe.js" defer></script><script src="/assets/js/7.56874f53.js" defer></script><script src="/assets/js/13.b9d56332.js" defer></script><script src="/assets/js/14.73379bc3.js" defer></script><script src="/assets/js/15.7f1deca5.js" defer></script>
  </body>
</html>
